<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>消息通知</title>
  <style>
    .message-detail {
      line-height: 1.8;
      padding: 15px;
    }
    .unread-row {
      background-color: #f0f9eb;
    }
  </style>
</head>
<body>
<div>
  <a href="space.html">返回大厅</a>
  <h2>我的消息</h2>
</div>
<div id="app">
  <!-- 消息列表 -->
  <el-table
          :data="messageData"
          style="width: 100%"
          :row-class-name="getRowClass">
    <el-table-column type="index" label="序号" width="60"></el-table-column>
    <el-table-column prop="senderName" label="发送者" width="120">
      <template slot-scope="scope">
        {{ scope.row.senderName || '系统通知' }}
      </template>
    </el-table-column>
    <el-table-column prop="content" label="消息内容" show-overflow-tooltip></el-table-column>
    <el-table-column label="状态" width="100">
      <template slot-scope="scope">
        <el-tag
                :type="scope.row.isRead ? 'info' : 'danger'"
                size="mini">
          {{ scope.row.isRead ? '已读' : '未读' }}
        </el-tag>
      </template>
    </el-table-column>
    <el-table-column prop="createdAt" label="时间" width="180">
      <template slot-scope="scope">
        {{ formatDate(scope.row.createdAt) }}
      </template>
    </el-table-column>
  </el-table>

  <!-- 分页 -->
  <div class="block">
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalCount">
    </el-pagination>
  </div>

  <!-- 消息详情对话框 -->
  <el-dialog title="消息详情" :visible.sync="detailVisible" width="40%">
    <div v-if="currentMessage" class="message-detail">
      <p><strong>发送者：</strong>{{ currentMessage.senderName || '系统通知' }}</p>
      <p><strong>时间：</strong>{{ formatDate(currentMessage.createdAt) }}</p>
      <p><strong>内容：</strong></p>
      <div style="padding: 10px; border: 1px solid #fffefe; border-radius: 4px;">
        {{ currentMessage.content }}
      </div>
    </div>
  </el-dialog>
</div>

<script src="js/axios-0.18.0.js"></script>
<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">

<script>
  new Vue({
    el: '#app',
    data() {
      return {
        messageData: [],
        currentPage: 1,
        pageSize: 5,
        totalCount: 0,
        detailVisible: false,
        currentMessage: null
      };
    },
    mounted() {
      this.loadMessages();
    },
    methods: {
      // 加载消息列表
      loadMessages() {
        axios.get('/MVCDemo/news/getNews', {
          params: {
            currentPage: this.currentPage,
            pageSize: this.pageSize
          }
        }).then(resp => {
          this.messageData = resp.data.rows;
          this.totalCount = resp.data.totalCount;
        });
      },

      // 行点击事件
      getRowClass({row}) {
        return row.isRead ? '' : 'unread-row';
      },

      // 显示消息详情
      showDetail(message) {
        //if (!message.isRead) {
          axios.post('/MVCDemo/news/updateIsRead', `id=${message.id}`)
                  // .then(resp=>{
                  //   // if(resp.data.code===200){
                  //   //   this.$message(resp.data.code);
                  //   // }
                  // });
        //}
        this.currentMessage = message;
        this.detailVisible = true;
        this.loadMessages();
      },

      // 分页处理
      handleSizeChange(val) {
        this.pageSize = val;
        this.currentPage = 1;
        this.loadMessages();
      },
      handleCurrentChange(val) {
        this.currentPage = val;
        this.loadMessages();
      },

      // 日期格式化
      formatDate(timestamp) {
        if (!timestamp) return '';
        const date = new Date(timestamp);
        return date.toLocaleDateString() + ' ' + date.toLocaleTimeString();
      }
    },
    watch: {
      // 监听表格行点击
      messageData: {
        handler() {
          this.$nextTick(() => {
            document.querySelectorAll('.el-table__row').forEach(row => {
              row.addEventListener('click', () => {
                const rowIndex = [...row.parentNode.children].indexOf(row);
                this.showDetail(this.messageData[rowIndex]);
              });
            });
          });
        },
        immediate: true
      }
    }
  });
</script>
</body>
</html>